<template>
  <table class="rowLine">
    <colgroup>
        <col>
        <col>
        <col>
        <col>
    </colgroup>
    <tbody>
      <tr class="row" v-for="(name, i) in labelList1">
        <td
          class="line"
          :class="active == i + '&' + j ? 'check' : ''"
          :style="{ background: i != 0 && j != 0 && i >= j ? '#EBEEF8' : '' }"
          @click="checkBlock(i, j)"
          v-for="(name1, j) in labelList1"
        >
          {{
            i == 0 && j != 0
              ? labelList[j - 1]
              : i != 0 && j == 0
              ? labelList[i - 1]
              : i != 0 && j != 0
              ? dataList[i - 1][j - 1]
              : ""
          }}
        </td>
        <!--  i+','+j-->
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: "rowLine",
  props: {
    labelList: {
      type: Array,
      default: () => ["a", "b", "c"],
    },
    dataList: {
      type: Array,
      default: () => [
        ["", "", ""],
        ["", "", ""],
        ["", "", ""],
      ],
    },
    // data: {
    //     type: Array,
    //     default: () => [
    //         ['', 'aa', 'bb'],
    //         ['aa', '', ''],
    //         ['bb', '', ''],
    //     ]
    // }
  },
  data() {
    return {
      active: "",
      labelList1: [],
    };
  },
  watch: {
    labelList: {
      handler(newVal) {
        let arr = ["", ...newVal];
        this.labelList1 = arr;
        // let data = []
        // for(var i=0; i< newVal.length; i++){
        //     data.push([])
        //     console.log(data);
        //     for(var j=0; j<newVal.length; j++){
        //         if(i==j){
        //             data[i][j] = 1;
        //         }else{
        //             data[i][j] = ''
        //         }
        //     }
        //     this.dataList = data;
        // }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    checkBlock(i, j) {
      if (i != 0 && j != 0 && i < j) {
        this.active = i + "&" + j;
        this.$emit("handleCheck", [i - 1, j - 1]);
      }
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.rowLine {
  min-width: 100%;
  min-height: 100%;
  .row {
    // width: 100%;
    // min-width: 708px;
    // min-height: 38px;
    // height: 16.6%;
    // line-height: 38px;
    white-space: nowrap;
  }
  .line {
    padding: 0 10px;
    height: 42px; //100%;
    line-height: 42px;
    text-align: center;
    border: 1px solid rgba(54, 112, 245, 0.1);
    box-sizing: border-box;
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 控制元素溢出部分不显示 */
    text-overflow: ellipsis; /* 使用省略号表示被裁切的文本 */
    &.check {
      background: rgba(54, 112, 245, 0.3);
      border: 1px solid #3670f5;
    }
  }
}
</style>
